<template>
  <div style="text-align: center; width: 680px; margin: auto; background: #fff">
    <table
      cellpadding="0"
      cellspacing="0"
      style="
        table-layout: fixed;
        position: relative;
        width: 95%;
        font-family: 仿宋_GB2312;
        font-size: 16px;
        margin: auto;
      "
    >
      <tr style="height: 10px">
        <td
          v-for="item in 100"
          :key="item"
          style="width: 1%; text-align: center"
        />
      </tr>
      <tr style="height: 60px">
        <td colspan="100" style="text-align: center">
          <span id="Lab_title" style="font-size: 24px; font-weight: bold"
            >注册二级造价工程师（水利工程）变更注册申请表</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">是否为川渝通办件</td>
        <td colspan="30" class="TableBorderRight">
          <el-checkbox
              v-model="formData.serviceType"
              class="input-center"
              :disabled="disabled"
              true-label="3"
              false-label="1"
              :checked="formData.serviceType==='3'"
          />
        </td>
      </tr>
      <tr style="height: 40px">
        <td colspan="14" class="TableBorderOther">姓名</td>
        <td colspan="14" class="TableBorderOther">
          {{ tempFormData.name }}
        </td>
        <td colspan="14" class="TableBorderOther">性别</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
            :disabled="disabled || checkValue1 === '111'"
            v-model="tempFormData.sex"
            :options="$dict('sex').list()"
            placeholder=""
          />
        </td>
        <td colspan="14" class="TableBorderOther">出生年月</td>
        <td colspan="14" class="TableBorderOther">
          <AdatePicker
            :disabled="disabled || checkValue1 === '111'"
            v-model="tempFormData.birthday"
            :clearable="false"
            placeholder=""
          />
        </td>
        <td colspan="16" rowspan="4" class="TableBorderRight">
          <img
            style="width: 100%; height: 100%"
            :src="tempFormData.idPhoto && tempFormData.idPhoto.thumbnailUri"
            alt=""
          />
        </td>
      </tr>
      <tr style="height: 40px">
        <td colspan="14" class="TableBorderOther">证件名称</td>
        <td colspan="70" class="TableBorderOther">
          <span
            ><input
              :checked="checkValue1 === '111'"
              @click="idCardChecked()"
              type="checkbox"
              style="margin-right: 10px"
              :disabled="true"
            />身份证</span
          >
          <span style="margin-left: 16px"
            ><input
              :checked="checkValue1 === '114'"
              @click="checkValue1 = '114'"
              type="checkbox"
              style="margin-right: 10px"
              :disabled="true"
            />军官证</span
          >
          <span style="margin-left: 16px"
            ><input
              :checked="checkValue1 === '099'"
              @click="checkValue1 = '099'"
              type="checkbox"
              style="margin-right: 10px"
              :disabled="true"
            />其他</span
          >
        </td>
      </tr>
      <tr style="height: 40px">
        <td colspan="14" class="TableBorderOther">证件号码</td>
        <td colspan="70" class="TableBorderOther">
          <input
            :disabled="true"
            v-model="tempFormData.paperCode"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 40px">
        <td colspan="28" class="TableBorderOther">注册证书编号</td>
        <td colspan="28" class="TableBorderOther">
          <input
            :disabled="disabled"
            v-model.trim="tempFormData.certCode"
            type="text"
            class="input-center"
            readonly
          />
        </td>
        <td colspan="14" class="TableBorderOther">注册有效期届<br />满时间</td>
        <td colspan="14" class="TableBorderOther">
          <AdatePicker
            :disabled="true"
            v-model="tempFormData.certEndTime"
            :clearable="false"
            placeholder=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="28" class="TableBorderOther">变更注册事项</td>
        <td colspan="72" class="TableBorderRight">
          <span
            ><input
              :checked="checkValue2 === 1"
              @click="checkValue2Change(1)"
              type="checkbox"
              style="margin-right: 10px"
              :disabled="disabled"
            />执业单位变更</span
          >
          <span style="margin-left: 16px"
            ><input
              :checked="checkValue2 === 2"
              @click="checkValue2Change(2)"
              type="checkbox"
              style="margin-right: 10px"
              :disabled="disabled"
            />单位名称变更</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="15" rowspan="5" class="TableBorderOther">
          执业单位<br />变更
        </td>
        <td colspan="20" class="TableBorderOther">原聘用单位名称</td>
        <td colspan="65" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 2"
            v-model.trim="tempFormData.employUnitOld"
            type="text"
            class="input-center"
            :readonly="checkValue2 === 1"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="8" rowspan="4" class="TableBorderOther">
          现聘用<br />单位情<br />况
        </td>
        <td colspan="12" class="TableBorderOther">单位名称</td>
        <td colspan="72" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 2"
            v-model.trim="tempFormData.employUnitNew"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="12" class="TableBorderOther">统一社会<br />信用代码</td>
        <td colspan="72" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 2"
            v-model.trim="tempFormData.creditCodeNew"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="12" class="TableBorderOther">通信地址</td>
        <td colspan="72" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 2"
            v-model.trim="tempFormData.employAddressNew"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="12" class="TableBorderOther">工商登记地</td>
        <td colspan="28" class="TableBorderOther">
          <ProSelect
            v-model="tempFormData.employRegistPlaceNew"
            placeholder=""
            :disabled="disabled || checkValue2 === 2"
          />
        </td>
        <td colspan="16" class="TableBorderOther">经办人手机<br />号码</td>
        <td colspan="28" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 2"
            v-model.trim="tempFormData.jbrTelNew"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="15" rowspan="2" class="TableBorderOther">
          单位名称<br />变更
        </td>
        <td colspan="20" class="TableBorderOther">原名称</td>
        <td colspan="65" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 1"
            v-model.trim="tempFormData.oldName"
            type="text"
            class="input-center"
            :readonly="checkValue2 === 2"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="20" class="TableBorderOther">现名称</td>
        <td colspan="72" class="TableBorderRight">
          <input
            :disabled="disabled || checkValue2 === 1"
            v-model.trim="tempFormData.newName"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="28" class="TableBorderBottom">申请人手机号码</td>
        <td colspan="16" class="TableBorderBottom">
          <input
            :disabled="disabled"
            v-model.trim="tempFormData.sqrTel"
            type="text"
            class="input-center"
          />
        </td>
        <td colspan="12" class="TableBorderBottom">原注册地</td>
        <td colspan="16" class="TableBorderBottom">
          <ProSelect
            v-model="tempFormData.registPlaceOld"
            placeholder=""
            :disabled="disabled || checkValue2 === 2"
          />
        </td>
        <td colspan="12" class="TableBorderBottom">现注册地</td>
        <td colspan="16" class="TableBorderRightBottom">
          <ProSelect
            v-model="tempFormData.registPlaceNew"
            placeholder=""
            :disabled="disabled"
          />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import AdatePicker from '@/components/TimePicker/AdatePicker';
import Aselect from '@/components/Select/Aselect';
import ProSelect from '@/components/AreaSelect/ProSelect';
import { fieldsValidate } from '@/utils/validate.js';
export default {
  props: {
    formData: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: { AdatePicker, Aselect, ProSelect },
  data() {
    return {
      checkValue1: '111',
      checkValue2: 1,
      oldUnitName: '',
      idCode: '',
      tempFormData: {},
    };
  },

  watch: {
    // 监听表单数据变化-根据变更类型、证件类型自动填充
    formData: {
      handler(val) {
        this.tempFormData = val || {};
        this.oldUnitName = this.tempFormData.employUnitOld || this.tempFormData.oldName;
        if (this.checkValue2 === 1) {
          this.tempFormData.oldName = '';
          this.tempFormData.newName = '';
        }
        if (this.tempFormData.paperType === '111') {
          this.idCode = this.tempFormData.paperCode;
        }
      },
      immediate: true,
    },
    checkValue1: {
      handler(val) {
        this.tempFormData.paperType = val;
      },
      immediate: true,
    },
    // 监听变更类型变化-根据变更类型自动填充
    checkValue2: {
      handler(val) {
        this.tempFormData.bgType = val;
        if (val === 2) {
          this.tempFormData.oldName = this.tempFormData.oldName || this.oldUnitName ;
          this.tempFormData.employUnitOld = '';
          this.tempFormData.employUnitNew = '';
          this.tempFormData.creditCodeNew = '';
          this.tempFormData.employAddressNew = '';
          this.tempFormData.employRegistPlaceNew = '';
          this.tempFormData.jbrTelNew = '';
        } else {
          this.tempFormData.oldName = '';
          this.tempFormData.newName = '';
          this.tempFormData.employUnitOld = this.tempFormData.employUnitOld || this.oldUnitName;
        }
      },
      immediate: true,
    },
  },
  methods: {
    checkValue2Change(value) {
      this.checkValue2 = value;
    },
    // 校验表单数据
    validateFields(flag) {
      let rules =
        flag === 1
          ? {
              employUnitOld: [
                { required: true, text: '请输入原聘用单位名称' },
                {
                  maxLength: 50,
                  text: '原聘用单位名称应小于50位',
                },
              ],
              employUnitNew: [
                { required: true, text: '请输入单位名称' },
                {
                  maxLength: 50,
                  text: '单位名称应小于50位',
                },
              ],
              creditCodeNew: [
                { required: true, text: '请输入统一社会信用代码' },
                {
                  maxLength: 50,
                  text: '统一社会信用代码应小于50位',
                },
              ],
              employAddressNew: [
                { required: true, text: '请输入通信地址' },
                {
                  maxLength: 100,
                  text: '通信地址应小于100位',
                },
              ],
              employRegistPlaceNew: [
                { required: true, text: '请输入工商登记地' },
                {
                  maxLength: 50,
                  text: '工商登记地应小于50位',
                },
                {
                  pattern: /^500000/,
                  text: '现仅接受工商登记地为重庆市的单位',
                },
              ],
              jbrTelNew: [
                { required: true, text: '请输入经办人手机号码' },
                {
                  pattern: /^1[3456789]\d{9}$/,
                  text: '请输入正确的经办人手机号码',
                },
              ],
              sqrTel: [
                { required: true, text: '请输入申请人手机号码' },
                {
                  pattern: /^1[3456789]\d{9}$/,
                  text: '请输入正确的申请人手机号码',
                },
              ],
              registPlaceNew: [{ required: true, text: '请选择现注册地' },
                {
                  pattern: /^500000/,
                  text: '现仅接受工商登记地为重庆市的单位',
                }],
            }
          : {
              oldName: [
                { required: true, text: '请输入原单位名称' },
                {
                  maxLength: 50,
                  text: '原单位名称应小于50位',
                },
              ],
              newName: [
                { required: true, text: '请输入新单位名称' },
                {
                  maxLength: 50,
                  text: '新单位名称应小于50位',
                },
              ],
              sqrTel: [
                { required: true, text: '请输入申请人手机号码' },
                {
                  pattern: /^1[3456789]\d{9}$/,
                  text: '请输入正确的申请人手机号码',
                },
              ],
              registPlaceNew: [
                  { required: true, text: '请选择现注册地' },
                {
                  pattern: /^500000/,
                  text: '现仅接受工商登记地为重庆市的单位',
                }],
            };
      if (this.tempFormData.serviceType == '3') {
        rules = flag === 1 ?
            {
              ...rules,
              employRegistPlaceNew: [
                {required: true, text: '请输入工商登记地'},
                {
                  maxLength: 50,
                  text: '工商登记地应小于50位',
                },
                {
                  pattern: /^500000/|/^510000/,
                  text: '现仅接受工商登记地为重庆市或四川省的单位',
                },
              ],
              registPlaceNew: [{required: true, text: '请选择现注册地'},
                {
                  pattern: /^500000/|/^510000/,
                  text: '现仅接受工商登记地为重庆市或四川省的单位',
                }],
            } : {
              ...rules,
              registPlaceNew: [
                {required: true, text: '请选择现注册地'},
                {
                  pattern: /^500000/|/^510000/,
                  text: '现仅接受工商登记地为重庆市或四川省的单位',
                }],
            }
      }
      return fieldsValidate(this.tempFormData, rules, this);
    },
    // 身份证号码填充
    idCardChecked() {
      this.checkValue1 = this.checkValue1 === '111' ? undefined : '111';
      this.tempFormData = {
        ...this.tempFormData,
        paperCode: this.idCode,
      };
    },
    // 校验表单
    validateForm() {
      const idReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      const officerReg = /^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/;
      if (
        this.tempFormData.paperType === '111' &&
        !idReg.test(this.tempFormData.paperCode)
      ) {
        this.$message.error('请输入正确的身份证号码');
        return false;
      } else if (
        this.tempFormData.paperType === '114' &&
        !officerReg.test(this.tempFormData.paperCode)
      ) {
        this.$message.error('请输入正确的军官证号码');
        return false;
      }
      return this.validateFields(this.checkValue2);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../../../../assets/styles/word.scss';
</style>
